<template>
  <section class="art_container">
    <div class="title">
      <!-- <input type="text" placeholder="请输入标题" v-if="isedit" v-model="artinfo.title" > -->
      <input type="text" placeholder="请输入标题"  v-model="artinfo.title" >
      <select name="" ref="opt" >
        <option value="1">{{artinfo.tag||'请选择标签'}}</option>
        <option value="html">html</option>
        <option value="js">js</option>
        <option value="css">css</option>
        <option value="vue">vue</option>
      </select>
      <button @click="clearbox">清空文章内容</button>
    </div>
    <div ref="editorbox" :class="cname">
      
    </div>
    <div class="postart">
      <button @click="editArt" v-if="isedit">保存修改</button>
      <button @click="postArt" v-else>发表文章</button>
    </div>
  </section>
</template>

<script>

  export default {
    props:{
      cname:{
        default:'editorbox',
        type:String
      },
      artinfo:{
        default:{},
        type:Object
      },
      isedit:{
        default:0,
        type:Number
      }
    },
    data(){
      return{
        editor:null,
        editorContent:'',
      }
    },
    methods: {
      postArt(){
        if(this.title==''){
          this.$toast.show('请输入标题')
        }else if(this.$refs.opt.value==0){
          this.$toast.show('请选择标签')
        }else{
          // this.$emit('getart',this.editorContent)
          this.$axios.$post('/art/upload',{
              title: this.artinfo.title,
              tag: this.$refs.opt.value,
              content: this.editorContent
          })
          .then(res=>{
            if(res.code==0){this.$toast.show('发表成功！')}
            this.$router.push('/articles')
          })
        }
      },
      clearbox(){
        this.editor.txt.clear()
      },
      editArt(){
        if(this.title==''){
          this.$toast.show('请输入标题')
        }else if(this.$refs.opt.value==0){
          this.$toast.show('请选择标签')
        }else{
          // this.$emit('getart',this.editorContent)
          this.$axios.$post('/art/edit',{
            id: this.artinfo.id,
            title: this.artinfo.title,
            tag: this.$refs.opt.value,
            content: this.editorContent
          })
          .then(res=>{
            if(res.code==0){this.$toast.show('发表成功！')}
            this.$router.push('/articles')
          })
        }
      }
    },  
    mounted () {
      if (process.browser) {
      let E = require('wangeditor')
        let editor = new E(this.$refs.editorbox)

        editor.customConfig.pasteFilterStyle = true
        // 忽略粘贴内容中的图片
        editor.customConfig.pasteIgnoreImg = false
 // 上传图片到服务器
        editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
        editor.customConfig.uploadImgServer = 'http://localhost:3333/uploadR/image?10'; //设置上传文件的服务器路径
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
 //自定义上传图片事件
        editor.customConfig.uploadImgHooks = {
            before: function(xhr, editor, files) {

            },
            success: function(xhr, editor, result) {
                console.log("上传成功");
            },
            fail: function(xhr, editor, result) {
                console.log("上传失败,原因是" + result);
            },
            error: function(xhr, editor) {
                console.log("上传出错");
            },
            timeout: function(xhr, editor) {
                console.log("上传超时");
            }
        }

        editor.customConfig.onchange = (html) => {
          this.editorContent = html
        }
        editor.create()
        editor.txt.html(this.artinfo.content||'<p>开始你的创作！</p>')
        this.editor=editor
      }
    }
  }
</script>
<style lang="scss" scoped>
  .art_container{
    display: block;
    text-align: left;
  }
</style>